<template>
  <view class="page">
    <u-navbar title="发布动态" :title-bold="true" :title-color="'#303133'">
      <view
        class="navbar-btn"
        slot="right"
        @click="putComment"
        :style="{ background: globPrimaryColor }"
        >发布
      </view>
    </u-navbar>
    <textarea
      :value="textvalue"
      placeholder="发布动态～"
      :maxlength="800"
      @input="bindIpt"
    ></textarea>
    <view class="addImg">
      <image
        class="img"
        v-if="saveImg.length == 0"
        @click="addImg"
        src="@/pageFound/static/images/publish_add_button.png"
      ></image>
      <view v-else class="addImg-imgview">
        <image
          @click="delImg(index)"
          class="imgs"
          v-for="(img, index) in saveImg"
          :key="index"
          :src="img"
          :style="{ marginRight: (index + 1) % 3 == 0 ? '0rpx' : '' }"
        ></image>
        <image
          class="img"
          @click="addImg"
          src="@/pageFound/static/images/publish_add_button.png"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadFile } from '@/utils/uploadFile.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      textvalue: '',
      saveImg: [],
      attach: [],
      isSend: false,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  methods: {
    bindIpt(e) {
      this.textvalue = e.detail.value
      this.isSend = this.textvalue == '' ? false : true
    },
    // 发布圈子
    putComment() {
      var data_obj = {
        content: this.textvalue,
      }
      if (this.attach.length == 0) {
        this.$edu.api.postCicle(data_obj).then((res) => {
          this.$u.route({
            url: '/pageFound/circle/index',
            type: 'redirectTo',
          })
        })
      } else {
        data_obj.attach = this.attach.join()
        this.$edu.api.postCicle(data_obj).then((res) => {
          this.$u.route({
            url: '/pageFound/circle/index',
            type: 'redirectTo',
          })
        })
      }
    },
    // 删除图片
    delImg(_index) {
      this.saveImg = this.saveImg.filter((item, key) => key != _index)
      this.attach = this.attach.filter((item, key) => key != _index)
      this.isSend = this.saveImg.length == 0 ? false : true
    },
    addImg() {
      var that = this
      if (that.saveImg.length > 8) {
        that.$u.toast('最多9张图')
        return
      }
      uni.chooseImage({
        count: 9,
        success: function (res) {
          var arr = []
          res.tempFilePaths.forEach((el) => {
            that.saveImg.push(el)
            uploadFile('/upload/putFile', el)
              .then((res) => {
                arr.push(res.data.id)
                that.attach = that.attach.concat(arr)
                that.attach = [...new Set(that.attach)]
                that.isSend = true
              })
              .catch((err) => {
                console.log(err)
              })
          })
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  background: #ffffff;
  min-height: 100vh;
  padding: 0 30rpx;
}

/* #ifdef MP-WEIXIN || APP-PLUS */
.page {
  padding: 0 30rpx;
}
/* #endif */

.navbar-btn {
  height: 56rpx;
  width: 100rpx;
  font-size: 30rpx;
  line-height: 56rpx;
  text-align: center;
  color: #fffffe;
  margin-right: 30rpx;
  border-radius: 6rpx;
}

/* #ifdef MP-WEIXIN */
/deep/.u-title {
  text-align: left;
}
/* #endif */

textarea {
  width: 100%;
  height: 300rpx;
  margin-top: 44rpx;
}

.addImg {
  width: 100%;
  height: auto;

  .img {
    height: 218rpx;
    width: 218rpx;
    display: block;
  }

  &-imgview {
    display: flex;
    flex-wrap: wrap;

    .imgs {
      height: 218rpx;
      width: 218rpx;
      display: block;
      margin-right: 17rpx;
      margin-bottom: 17rpx;
    }
  }
}
</style>
